<template>
  <div>
    <el-form label-width="120px" :model="form">
      <el-form-item label="公司名称">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="公司地址">
        <el-input v-model="form.address" >
          <template #append>
            <el-button type="primary"  @click="geo">定位</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="地图信息"  >
        <qqmap zoom="18" @poi-change="changePoi" :lat="form.lat" :lng="form.lng"/>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phone" ></el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="note" key="note">
        <el-input type="textarea" v-model="form.note" key="note" >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleData" >保存信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qqmap from "@/components/qqmap.vue";

export default {
  components: {qqmap},
  data() {
    return {
      form: {},
      rules: {
        name: [{
          required: true,
          message: "请输入名称",
          trigger: "blur"
        }],
      },
    };
  },
  methods: {
    async handleData() {
      var self = this;
      var param = this.form;
      var res = await this.$http.post("/shop/update", param );
      if (res.code == 200) {
        self.$message({
          message: "更新成功",
          type: "success",
        });
      } else {
        self.$message.error(res.msg);
      }
    },
    async geo() {
      var param = {};
      param.address = this.form.address;
      var self = this;
      var result = await this.$http.form("/area/lbs", param);
      if (result.code == 0) {
        self.form.lat = result.lat;
        self.form.lng = result.lng;
        if (result.provinceId) {
          self.form.province = result.provinceId;
        }
        if (result.cityId) {
          self.form.city = result.cityId;
        }
        if (result.countyId) {
          self.form.county = result.countyId;
        }
      }
    },
    async loadData() {
      const res = await this.$http.post("/shop/view", {});
      if (res.code === 200) {
        this.form = res.data;
      }
    },
    changePoi(event) {
      console.log(event);
      this.form.lat = event.lat;
      this.form.lng = event.lng;
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style>
</style>
